<template>
	<div>
		<div class="head">
			<a @click="getBack" class="return"></a>
			<span v-text="name"></span>
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div class="card-padding" v-if="list">
					<div class="content">
						<img :src="list.thumbnail" alt="">
						<div v-html="list.ruleExplain"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { dateFormat } from 'vux';
	export default {
		name: 'Explain',
		data() {
			return {
				list: [],
				code: '',
				name: ''
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			this.code = this.$route.query.code;
			this.axios.get(process.env.API_HOST + 'plans/' + this.code).then(res => {
				if(res.data.code == 200) {
					this.list = res.data.data;
					this.name = this.list.name;
				}
			})
		},
		methods: {
			getBack() {
				if(this.$route.query.type){
					this.$router.push({
						path: '/'
					})
				}else{
					this.$router.back(-1);
				}
			}
		},
		filters: {
			dateFormat
		}
	}
</script>

<style lang="less" scoped="scoped">
	.head~.overlay {
		top: 45px;
		background: #344b7d;
	}
	
	.head .return:after {
		border-color: #FFFFFF;
	}
	
	.overlay-content {
		padding: 0 10px;
	}
	
	.card-padding {
		padding-bottom: 20px;
	}
	
	.content-title {
		padding: 10px 0;
		text-align: left;
		font-size: 19px;
	}
	
	.content-time {
		color: #8690ab;
		font-size: 13px;
		margin-bottom: 10px;
	}
	
	.content {
		font-size: 14px;
		color: #8690ab;
		/deep/ img {
			width: 100%;
			padding: 5px 0;
		}
	}
	
	/deep/ .ql-video {
		width: 100%;
	}
	
	.tag {
		background: #f5f5f5;
		color: #666;
		display: inline-block;
		padding: 0 15px 0 10px;
		font-size: 13px;
		position: relative;
		margin-bottom: 20px;
		&:before {
			position: absolute;
			right: 5px;
			top: 6px;
			content: " ";
			width: 0;
			height: 0;
			border-top: 4px solid transparent;
			border-bottom: 4px solid transparent;
			border-left: 4px solid #666;
		}
	}
</style>